<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>css3-media</title>
		<style type="text/css">
			body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
				padding: 0;
				margin: 0;
			}
			.content{
				zoom: 1;
			}
			.content:after{
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
				
			}
			.leftBox, .rightBox{
				float: left;
				width: 20%;	
				height: 500px;
				margin: 5px;
				background: #ffccf7;
				display: inline;
				-webkit-transition: width 1s ease;
				-moz-transition: width 1s ease;
				-o-transition:width 1s ease;
				-ms-transition: width 1s ease;
				transition: width 1s ease;
			}
			.middleBox{
				float: left;
				width: 50%;
				height: 800px;
				margin: 5px;
				background: #b1ffcc;
				display: inline;
				-webkit-transition: width 1s ease;
				-moz-transition: width 1s ease;
				-o-transition:width 1s ease;
				-ms-transition: width 1s ease;
				transition: width 1s ease;
			}
			.rightBox{
				background: #fffab1;
			}
			@media screen and (min-width: 400px) and (max-width: 1024px){
				.rightBox{
					width: 0;
				}
				.leftBox{
					width: 30%;
				}
				.middleBox{
					width: 65%;
				}
			}
			@media screen and (max-width: 400px) {
				.leftBox, .rightBox, .middleBox{
					width:98%;
					height: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="leftBox">
				
			</div>
			<div class="middleBox">
				
			</div>
			<div class="rightBox">
				
			</div>
		</div>
	</body>
</html>
